<template>
    <div class="quanbu">
        <div class="quanbu-top">
    		<span class="quanbu-left"><img v-bind:src="imgs"></span>
    		<span class="quanbu-center"><img v-bind:src="imga"></span>
    		<span class="quanbu-right">全部商品</span>
    	</div>
    	<div class="quanbu-box">
    		<div class="quanbu-warp">
    			<img v-bind:src='warp'>
    			<h2>开放式的餐厨空间是这个家最重要的活动区域。金色材质的烛台点缀，让房子里充盈着时髦灵动的活力。</h2>
    			<h1>相关好物</h1>
    		</div>
    	</div>
    	<div class="box">
    		<div class="quanbu-img">
    				<ul>
    					<li v-for="test in infos">
							<img v-bind:src="test.imgs">
						    <p>
							    {{test.text}}
							    <span>{{test.text1}}</span>
						    </p>
    					</li>
    				</ul>
    			</div>
    	</div>
    </div>
</template>

<script>
export default {
  name: 'quanbu',
  data () {
    return {
    	imgs:"../static/img/top-left.png",
    	imga:'../static/img/wupin-top.png',
    	warp:'../static/img/quanbu-warp.png',
    	infos:[
    		{
	    		imgs:"../static/img/quanbu-img1.png",
	    		text:"下水道过滤网",
	    		text1:"￥5.00"
    		},
    		{
	    		imgs:"../static/img/quanbu-img1.png",
	    		text:"下水道过滤网",
	    		text1:"￥59.00"
    		},
    		{
	    		imgs:"../static/img/quanbu-img1.png",
	    		text:"下水道过滤网",
	    		text1:"￥5.00"
    		},
    	],
    }
  }
}
</script>


<style scoped lang="less">
@import url(../assets/less/quanbu.less);

</style>

 